<!-- src/views/ClassCenter.vue -->
<template>
  <div class="class-center-container">
    <el-card class="box-card">
      <!-- 页面标题 -->
      <template #header>
        <div class="card-header">
          <h2>班级中心</h2>
        </div>
      </template>

      <!-- 选项卡 -->
      <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange">
        <!-- 学生管理选项卡 -->
        <el-tab-pane label="学生管理" name="studentManagement">
          <StudentManagement
              :teacher-id="teacherId"
              @tab-change="handleTabChange"
          />
        </el-tab-pane>

        <!-- 班级通知选项卡 -->
        <el-tab-pane label="班级通知" name="classNotice">
          <ClassNotice />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import StudentManagement from './components/StudentManagement.vue'
import ClassNotice from './components/ClassNotice.vue'

// 响应式数据
const activeTab = ref('studentManagement')
const teacherId = ref<number>(Number(localStorage.getItem('teacherId')) || 1)

// 方法
const handleTabChange = (tabName: string) => {
  console.log('切换到标签:', tabName)
  activeTab.value = tabName
}

// 生命周期
onMounted(() => {
  console.log('班级中心页面加载完成')
})
</script>

<style scoped>
.class-center-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.box-card {
  margin: 0 auto;
  max-width: 1400px;
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}
</style>
